<template>
  纵向步骤条
  <NSwitch v-model:value="option.group!.vertical" />
  <NvCrud
    v-model:form="form"
    :option
    :data
    @row-save="handleSave"
    @row-update="handleUpdate"
    @row-delete="handleDelete"
  />
</template>

<script setup lang="ts">
import type { NvCrudOption } from 'nv-crud'
import { NSwitch, useMessage } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { reactive, ref } from 'vue'

interface RowData {
  name: string
  sex: '男' | '女'
  age: number
}

const option = reactive<NvCrudOption<RowData>>({
  layout: 'simple',
  fields: {
    name: { title: '姓名' },
    sex: {
      title: '性别',
      type: 'radio',
      dict: [
        { label: '男', value: '男' },
        { label: '女', value: '女' },
      ],
    },
    age: { title: '年龄', type: 'number' },
    birth: { title: '生日', type: 'date' },
    addr: { title: '地址' },
    remark: { title: '备注' },
  },
  formWrapper: {
    width: '800px',
  },
  group: {
    type: 'steps',
    vertical: false,
    items: [
      {
        title: '分组1',
        expanded: true,
        fields: ['name', 'sex', 'age'],
      },
      {
        title: '分组2',
        fields: ['birth', 'addr', 'remark'],
      },
    ],
  },
})

const data = Array.from({ length: 3 }, (_, i) => ({
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
}))

const form = ref<RowData>()
const message = useMessage()
function handleSave(data: RowData, done: (close?: boolean) => void) {
  message.info(`row-save: ${JSON.stringify(data)}`)
  done(true)
}
function handleUpdate(data: RowData, done: (close?: boolean) => void) {
  message.info(`row-update: ${JSON.stringify(data)}`)
  done(true)
}
function handleDelete(data: RowData) {
  message.info(`row-delete: ${JSON.stringify(data)}`)
}
</script>
